<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=0.1, maximum-scale=0.1, minimum-scale=0.1, user-scalable=no">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2745992_9vhidw1o6b.css">
    <link rel="stylesheet" href="../css/session.css">
    <title>2021广州国际花卉艺术节预约页面</title>
</head>
<body>
    <section>
        <div>
            <div class="data">
                <div>
                    <span>8月16日</span>
                    <span class="iconfont icon-xialajiantou"></span>
                </div>
                <div class="dateList">
                    <ul>
                        <li>
                            <label for="">
                                2021-08-16
                                <input type="radio" name="dateTiem">
                            </label>
                        </li>
                        <li>
                            <label for="">
                                2021-08-17
                                <input type="radio" name="dateTiem">
                            </label>
                        </li>
                        <li>
                            <label for="">
                                2021-08-18
                                <input type="radio" name="dateTiem">
                            </label>
                        </li>
                        <li>
                            <label for="">
                                2021-08-19
                                <input type="radio" name="dateTiem">
                            </label>
                        </li>
                        <li>
                            <label for="">
                                2021-08-20
                                <input type="radio" name="dateTiem">
                            </label>
                        </li>
                        <li>
                            <label for="">
                                2021-08-21
                                <input type="radio" name="dateTiem">
                            </label>
                        </li>
                        <li>
                            <label for="">
                                2021-08-22
                                <input type="radio" name="dateTiem">
                            </label>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="session">
                <div><span>场次</span><span>状态</span></div>
                <ul>
                    <li><span>09:00-12:00</span><span>可预约</span></li>
                    <li><span>12:00-14:30</span><span>可预约</span></li>
                    <li><span>14:30-17:10</span><span>可预约</span></li>
                </ul>
            </div>
            <div class="hint"><span class="iconfont icon-xingxing"></span> 一个手机号，一天只能预约一场。</div>
        </div>
    </section>
    <!-- 加载数据的动画 -->
    <div class="masking">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <!-- 预约详情的弹框 -->
    <div class="details">
        <div class="content">
            <h2>提示</h2>
            <span>请确认预约信息</span>
            <ul class="tiemList">
                <li>日期：2021-06-13</li>
                <li>时间：09:00-12:00</li>
            </ul>
            <div class="btns">
                <button>取消预约</button>
                <button>确认预约</button>
            </div>
        </div>
    </div>
    <script src="../js/session.js" type="module"></script>
</body>
</html>